<template>
  <a-modal destroyOnClose :title="$t('modifyPassword.edit_pwd')" :okText="$t('common.confirm')" :cancelText="$t('common.cancel')" :visible="visible" :width="520" @cancel="cancelModal(false)" @ok="cancelModal(true)" class="AddAcct">
    <a-form :form="form">
      <a-form-item :label="$t('modifyPassword.primary_pwd')" v-bind="formItemLayout">
        <a-input-password v-decorator="['oldPassword',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}${$t('modifyPassword.primary_pwd')}`}]}]" :placeholder="$t('modifyPassword.primary_pwd')" />
      </a-form-item>
      <a-form-item :label="$t('modifyPassword.edit_pwd')" v-bind="formItemLayout">
        <a-input-password v-decorator="['newPasswrod',{rules: [{ required: true, message: '请输入正确格式的修改密码', pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/ }]}]" :placeholder="$t('modifyPassword.edit_pwd')" />
      </a-form-item>
      <a-form-item :label="$t('modifyPassword.confirm_pwd')" v-bind="formItemLayout">
        <a-input-password v-decorator="['newPassword1',{rules: [{ required: true, message: '请输入正确格式的确认密码', pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/}]}]" :placeholder="$t('modifyPassword.confirm_pwd')" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { changepwd } from '@/api/common'
export default {
  name: 'AddAcct',
  props: ['visible'],
  data () {
    return {
      form: this.$form.createForm(this),
      formItemLayout: ''
      // //强弱密码校验,密码至少包含大写字母，小写字母，数字，且不少于8位
      // pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]*$/
    }
  },
  watch: {
    visible: {
      handler (newValue, oldValue) {
        if (newValue) {
          this.initData()
        }
      },
      immediate: false
    }
  },
  created () {
  },
  methods: {
    initData () {
      this.form.setFieldsValue({
        oldPassword: '',
        newPasswrod: '',
        newPassword1: ''
      })
    },
    cancelModal (type) {
      if (type) {
        this.getData()
      } else {
        this.$emit('confirm', type)
      }
    },
    getData () {
      this.form.validateFields((err, values) => {
        if (!err) {
          if (values.newPasswrod !== values.newPassword1) {
            this.$message.warning(this.$t('modifyPassword.inconsistency_pwd'))
            return
          }
          let params = {
            oldPassword: values.oldPassword,
            newPasswrod: values.newPasswrod
          }
          this.sendData(params)
        }
      })
    },
    async sendData (params) {
      let res = await changepwd(params)
      if (res.code === 200) {
        this.$message.success(res.message)
        this.$emit('confirm', true)
      } else {
        this.$message.error(res.message)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
</style>
